<template>
  <view class="content">
    <!-- #ifdef H5 -->
    <view class="header">
      <view class="back" @click='back()'>
        <view class="iconfont icon-xiangzuo" style="color: #fff"></view>
      </view>
      <text class="title">城市选择</text>
    </view>
    <!-- #endif -->

    <city-select :window-height="windowHeight" @onSelect="onSelect"></city-select>
  </view>
</template>

<script>
import CitySelect from "./components/city-select/index.nvue";

export default {
  name: "index",
  components: {CitySelect},
  data() {
    return {
      windowHeight: '',
    }
  },
  onLoad() {
	  const info = uni.getSystemInfoSync();
	  const windowHeight = info.windowHeight;
	  // this.windowHeight = -100+"px";
	  // #ifdef H5
	  this.windowHeight = (windowHeight - 44) + 'px'
	  // #endif
	  // #ifdef APP
	  this.windowHeight = (windowHeight - 10) + 'px'
	  // #endif
  },
  methods: {
    back(){
      uni.navigateBack();
    },
    onSelect(e) {
      uni.$emit("citySelect", e)
      uni.navigateBack();
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
}
.header {
  position: sticky;
  z-index: 999;
  display: flex;
  flex-direction: row;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  background-color: #42ca4d;
  padding: 20rpx;

  .title {
    flex: 1;
    color: #fff;
    font-size: 16px;
    text-align: center;
  }
}
</style>